<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Hydrogen-issues Login</title>
    <link rel="stylesheet" href="jquery/css/redmond/jquery-ui-1.8.custom.css"/>
    <link rel="stylesheet" href="jquery/css/default.css"/>
</head>
<body>

<div id="AlertMessage" class="ui-widget ui-state-default ui-corner-bottom" style="">
    <span><a href="#" class="ui-corner-all" id="closeAlertMessageLink"
             onclick="$.closeAlert();return false;">关闭</a></span>
    <span id="AlertMessageText"></span>
</div>

<div id="loginDialog" title="登录" width="350" modal="true" resizable="false" closable="false" autoOpen="false">
    <form id="loginForm" action="#">
        <div class="ext-form-field" label="用户名" name="username" type="text"></div>
        <div class="ext-form-field" label="密码" name="password" type="password"></div>
    </form>
</div>

<div id="signupDialog" title="注册" width="450" modal="true" autoOpen="false">
    <form id="signupForm" action="#">
        <div class="ext-form-field" label="用户名" name="username" type="text"></div>
        <div class="ext-form-field" label="密码" name="password" type="password"></div>
        <div class="ext-form-field" label="再次输入密码" name="password2" type="password"></div>
    </form>
</div>

<div id="setupDialog" title="第一次使用" width="550" modal="true" closable="false" resizable="false">
    <div class="ui-widget">
        <div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;">
            <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
                <strong>欢迎使用 Hydrogen-issues!</strong> 您现在是第一次使用，请在下面设置好管理员帐号。</p>
        </div>
    </div>

    <form action="#" id="setupForm">
        <fieldset>
            <legend>管理员信息</legend>
            <div class="ext-form-field" label="用户名" name="username" type="text" value="Administrator"></div>
            <div class="ext-form-field" label="密码" name="password" type="password"></div>
            <div class="ext-form-field" label="再次输入密码" name="password2" type="password"></div>
        </fieldset>

        <fieldset>
            <legend>项目信息</legend>
            <div class="ext-form-field" label="项目名称" name="projectName" type="text"></div>
            <div class="tip ui-corner-all" style="margin-left:24%;width:65%">目前只支持一个项目。</div>
        </fieldset>

        <fieldset>
            <legend>电子邮件</legend>
            <div class="ext-form-field" label="SMTP服务器" name="smtpServerAddress" type="text"></div>
            <div class="ext-form-field" label="SMTP服务器端口" name="smtpServerPort" type="text"></div>
            <div class="ext-form-field" label="用户名" name="smtpUsername" type="text"></div>
            <div class="ext-form-field" label="密码" name="smtpPassword" type="text"></div>
        </fieldset>
    </form>
</div>

<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-extra.js"></script>
<script type="text/javascript" src="jquery/plugins/jquery.form.js"></script>
<script type="text/javascript">

    var loginDialog = $('#loginDialog').dialog({
        buttons: {
            '登录': function() {
                if (!loginForm.validate()) {
                    return;
                }

                $.post('ajax/Login!login.action', loginForm.serialize(), function() {

                });
            },
            '注册': function() {
                signupDialog.dialog('open');
            }
        },

        open: function() {
            loginForm.find('input[name=username]').focus();
        }
    });

    var signupDialog = $('#signupDialog').dialog({
        buttons: {
            '确定': function() {
                if (!signupForm.validate()) {
                    return;
                }

                $.post('ajax/Login!signup.action', signupForm.serialize(), function() {
                    signupDialog.dialog('close');
                    $.alert("注册成功。");
                    loginForm.val(signupForm.val('username'));
                });
            }
        },

        open: function() {
            signupForm.find('input[name=username]').focus();
        }
    });

    var signupForm = $.form('#signupForm', {
        validate: function() {
            if (this.isEmpty('username')) {
                $.alertError('用户名不能为空。');
                return false;
            }

            if (this.isEmpty('password')) {
                $.alertError('密码不能为空。');
                return false;
            }

            if (this.val('password') != this.val('password2')) {
                $.alertError('两次输入的密码不匹配。');
                return false;
            }

            return true;
        }
    });

    var loginForm = $.form('#loginForm', {
        validate: function() {
            if (this.isEmpty('username')) {
                $.alertError('用户名不能为空。');
                return false;
            }

            if (this.isEmpty('password')) {
                $.alertError('密码不能为空。');
                return false;
            }

            return true;
        }
    });

    var setupForm = $.form('#setupForm', {
        validate: function() {
            if (this.isEmpty('username')) {
                $.alertError('请填写用户名。');
                return false;
            }

            if (this.isEmpty('password')) {
                $.alertError('请填写密码。');
                return false;
            }

            if (this.val('password') != this.val('password2')) {
                $.alertError('两次输入的密码不匹配。');
                return false;
            }

            if (this.isEmpty('projectName')) {
                $.alertError('请填写项目名称。');
                return false;
            }

            return true;
        }
    });

    var setupDialog = $('#setupDialog').dialog({
        buttons: {
            '确定': function() {
                if (!setupForm.validate()) {
                    return;
                }

                $.post('ajax/Setup.action', setupForm.serialize(), function() {
                    setupDialog.dialog('close');
                });
            }
        }
    });

    ////////////////////////////////////////////////////

    $(function() {

        $.post('ajax/Application!applicationInitialized.action', {}, function(result) {
            if (!result.initialized) {
                setupDialog.dialog('open');
            } else {
                loginDialog.dialog('open');
            }
        });

    });
</script>
</body>
</html>